<html>
  <head>
    <title>HTML5_ScrollInToView方法</title>
    <meta charset="utf-8" />

    <style>
        *{
            padding: 0;
            margin: 0;
        }
      .btn {
        position: fixed;
        bottom: 50px;
        right: 50px;
        width: 50px;
        height: 50px;
        background-color: pink;
      }
      .con{
        width: 100%;
        height: 600px;
        background-color: rgb(230, 164, 164);
        overflow: scroll;
      }
      h2 {
        width: 80%;
        height: 600px;
      }
      .a {
        background: pink;
      }
      .b {
        background: rgb(61, 111, 177);
      }
      .c {
        background: rgb(199, 168, 32);
      }
      .d {
        background: rgb(49, 40, 173);
      }
      .e {
        background: rgb(126, 219, 64);
      }
      .f {
        background: rgb(240, 174, 120);
      }
      .g {
        background: rgb(164, 98, 202);
      }
      .h {
        background: rgb(219, 64, 123);
      }
    </style>
  </head>
  <body>
    <div class="con">
      <div class="btn">Btn</div>
      <h2 class="a">a</h2>
      <h2 class="b">b</h2>
      <h2 class="c">c</h2>
      <h2 class="d">d</h2>
      <h2 class="e">e</h2>
      <h2 class="f">f</h2>
      <h2 class="g">g</h2>
      <h2 class="h">h</h2>
    </div>
  </body>
</html>
<script type="text/javascript">
  let btn = document.querySelector('.btn');
  let e = document.querySelector('.f');
  btn.onclick = () => {
    e.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  };
</script>
